<script setup>
import { onMounted, ref } from 'vue'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
import { deviceDeployServer } from '@/api'
const type = ref(1)
// const navList = ref([
//   {
//     type: 1,
//     name: '监视'
//   },
//   {
//     type: 2,
//     name: '通信'
//   },
//   {
//     type: 3,
//     name: '导航'
//   }
// ])
const list = ref([
  {
    equipmentName: '设施一',
    type: '类型一',
    unit: '单位一'
  },
  {
    name: '设施二',
    type: '类型二',
    unit: '单位二'
  },
  {
    name: '设施三',
    type: '类型三',
    unit: '单位三'
  },
  {
    name: '设施四',
    type: '类型四',
    unit: '单位四'
  },
  {
    name: '设施五',
    type: '类型五',
    unit: '单位五'
  }
])

// 获取通导监设施列表
const getDeviceList = async () => {
  const res = await deviceDeployServer()
  list.value = res.data.filter((item) => item.type == type.value)
}

const changeNav = (item) => {
  type.value = item.type
  getDeviceList()
}

onMounted(() => {
  getDeviceList()
})
</script>
<template>
  <div class="card">
    <CommonTitle title="监视设备信息" />
    <div class="navbox">
      <p v-for="(item, index) in navList" :key="index" :class="{ active: type === item.type }" @click="changeNav(item)">
        {{ item.name }}
      </p>
    </div>
    <div class="table">
      <ul class="thead">
        <li>名称</li>
        <li>类型</li>
        <li>运营单位</li>
        <li>部署位置</li>
        <li>覆盖范围</li>
      </ul>
      <ul class="tbody">
        <vue3-seamless-scroll :list="list" :step="0.3" :hover="true" :isRemUnit="true" :wheel="true" :delay="3"
          :limitScrollNum="4">
          <li v-for="(item, index) in list" :key="index">
            <p>
              <span class="riseLandPointName" :title="item.equipmentName">{{
                item.equipmentName
              }}</span>
            </p>
            <p>
              <span :class="['type', 'riseLandPointName']">{{ item.equipmentType }}</span>
            </p>
            <p>
              <span class="riseLandPointName" :title="item.companyName">{{
                item.companyName
              }}</span>
            </p>
            <p>
              <span class="riseLandPointName" :title="item.deploymentAddress">{{
                item.deploymentAddress
              }}</span>
            </p>
            <p class="riseLandPointName" :title="item.coverRange">{{ item.coverRange }}</p>
          </li>
        </vue3-seamless-scroll>
      </ul>
    </div>
  </div>
</template>
<style scoped lang="scss">
.card {
  margin-top: 15px;

  .navbox {
    display: flex;
    align-items: center;
    padding: 5px 10px;

    p {
      flex: 1;
      padding: 5px 0 10px;
      font-size: 15px;
      opacity: 0.7;
      text-align: center;
      cursor: pointer;
      background: left bottom url('@img/overview/navbar.png') no-repeat;
      background-size: 100% 3px;

      &.active {
        opacity: 1;
        position: relative;
        background: -10px 25px url('@img/overview/navbar_active.png') no-repeat;
        background-size: 120% 20px;

        &::before {
          position: absolute;
          top: 15px;
          left: 0;
          width: 7px;
          height: 7px;
          content: '';
          background: url('@img/overview/arrow_left.png');
          background-size: 100% 100%;
        }

        &::after {
          position: absolute;
          top: 15px;
          right: 0;
          width: 7px;
          height: 7px;
          content: '';
          background: url('@img/overview/arrow_right.png');
          background-size: 100% 100%;
        }
      }
    }
  }

  .table {
    width: 100%;
    padding: 10px;

    .thead {
      width: 100%;
      height: 37px;
      display: flex;
      background: url('@img/infrastructure/table_header_bg.png');
      background-size: 100% 100%;

      li {
        flex: 1;
        line-height: 37px;
        text-align: center;
      }
    }

    .tbody {
      height: 150px;
      overflow: hidden;

      li {
        display: flex;
        height: 37px;
        line-height: 37px;
        border-bottom: 1px solid #0f496c;

        &:nth-child(odd) {
          background-color: rgba(15, 73, 108, 0.3);
        }

        p {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          text-align: center;

          .type {
            width: 67px;
            height: 20px;
            line-height: 18px;
            text-align: center;
            background: rgba(0, 213, 255, 0.25);
            border-radius: 2px;
            border: 1px solid #00d5ff;
          }

          .riseLandPointName {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 60px;
          }
        }
      }
    }
  }
}
</style>
